<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form ref="form" label-width="100px">
        <el-form-item label="选择文件：">
          <el-upload
            class="upload-demo"
            accept=".xlsx, .xls"
            :action="uploadUrl + '?courseId=' + courseId"
            :headers="headers"
            :disabled="isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :limit="1"
            :auto-upload="true"
            drag
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传PDF，MP4文件，且不超过100MB
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="模版下载：">
          <el-button type="primary" size="small " @click="downloadExcel"
            >获取模版</el-button
          >
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      dialogVisible: false,
      uploadUrl: process.env.VUE_APP_BASE_API + "/question/importQuestion", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      courseId: 0,
      isUploading: false,
    };
  },

  mounted() {},

  methods: {
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.dialogVisible = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.isUploading = true;
      console.log(event)
    },
    //模版下载
    downloadExcel() {
      window.open(
        "https://abzy-test.oss-cn-beijing.aliyuncs.com/template/%E9%A2%98%E7%9B%AE%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xlsx",
        "_self"
      );
    },
    show(courseId) {
      this.dialogVisible = true;
      this.courseId = courseId;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>